<template>
    <aside>
        <div id="admin-sidebar" class="aside-menu" :style="{
            width: asideWidth
        }">
            <div class="aside-menu__logo">
                <h1></h1>
            </div>
            <div class="aside-menu__menulist">
                <i-menu 
                    class="ec-menu" 
                    :width="asideWidth" 
                    :active-name="$route.name === '/' ? 'home' : $route.name"
                    theme="dark" 
                    :open-names="aOpenedSubmenu"
                    @on-select="goRouter">
                    <i-submenu
                        v-for="(item, index) in menu" 
                        :key="index" 
                        :name="item.name"
                        v-if="item.children && !item.noSidebarMenu">
                        <template slot="title">
                            <i-icon type="ios-navigate"></i-icon>
                            {{ item.title }}
                        </template>
                        <i-menu-item
                            v-for="(itemSub, indexSub) in item.children" 
                            :key="indexSub"
                            :name="itemSub.name"
                            v-if="!itemSub.noSidebarMenu">
                            {{ itemSub.title }}
                        </i-menu-item>
                    </i-submenu>
                    <template v-else>
                        <i-menu-item
                        :name="item.name"
                        v-if="!item.noSidebarMenu">
                        <i-icon type="ios-navigate"></i-icon>
                        {{ item.title }}
                    </i-menu-item>
                    </template>
                </i-menu>
            </div>
            <div class="aside-menu__footer">
                <i-poptip trigger="hover" placement="top-start">
                    <a class="open"><i-icon class="icon" type="android-person" size="18"></i-icon>Sawyer Admin</a>
                    <div class="s-content" slot="content">
                        <router-link to="/account-setting">
                            账户设置
                        </router-link>
                        <a>退出登录</a>
                    </div>
                </i-poptip>
            </div>
        </div> 
    </aside>
</template>
<script>
// mapState
import { mapState, mapActions } from 'vuex'
// node
import url from 'url'

export default {
    name: 'aside-menu',
    data() {
        return {
            spanLeft: 5,
            spanRight: 19,
            aOpenedSubmenu: []
        }
    },
    computed: {
        ...mapState('adminShell/adminSidebar', ['menu', 'asideWidth']),
        iconSize() {
            return this.spanLeft === 5 ? 14 : 24
        }
    },
    created() {
        this.aOpenedSubmenu.push(
            url.parse(window.location.href, true).path.split('/')[1]
        )
    },
    methods: {
        ...mapActions('adminShell/adminSidebar', ['opendSubMenu']),
        toggleClick() {
            if (this.spanLeft === 5) {
                this.spanLeft = 2
                this.spanRight = 22
            } else {
                this.spanLeft = 5
                this.spanRight = 19
            }
        },
        goRouter(active) {
            this.$router.push({
                name: active
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.aside-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    background: #495060;
}
.aside-menu__logo {
    width: 100%;
    height: @header-height;
    background: @primary-color;
    h1 {
        margin-left: 12px;
        width: 126px;
        height: @header-height;
        background: url('~@/assets/images/logo.png') left center no-repeat;
        background-size: 132% auto;
    }
}
.aside-menu__menulist {
    position: absolute;
    width: 100%;
    top: @header-height + 10px;
    bottom: @header-height;
    overflow-y: auto;
    &::-webkit-scrollbar {
        display: none;
    }
}
.aside-menu__footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: @header-height;
    line-height: @header-height;
    background: #525869;
    padding: 0 @gap;
    a.open {
        .icon {
            margin-right: 6px;
        }
        font-size: 14px;
        color: #fff;
    }
    .s-content {
        a {
            color: #495060;
            display: block;
            padding: 6px 0;
        }
        a:hover {
            color: @primary-color;
        }
    }
}
</style>